<template>
  <div class="container">
    <div class="container_page">
      <img class="logo" :src="require('@/assets/img/pay/ic_success.svg')" />
      <div class="tip">
        {{ $t("wallet_refundTips") }}
      </div>
      <div class="action">
        <div class="action_title" style="margin-bottom: 12px;">
          {{ $t("help_contactText") }}
        </div>
        <div class="action_contact">
          <img src="@/assets/img/help/whatsapp@2x.png" alt="" />
          <span @click="toWhatsapp">{{
            whatsapp
          }}</span>
        </div>
        <div class="action_contact">
          <img src="@/assets/img/help/email@2x.png" alt="" />
          <span>{{ email }}</span>
          <img
            src="@/assets/img/help/ic_copy.svg"
            alt=""
            style="width: 20px;height: 20px;margin-left:6px;"
            @click="copyEmail"
          />
        </div>
      </div>
      <bottom-button
        :title="$t('public_done')"
        @click="finish"
        background="var(--card-bg)"
      ></bottom-button>
    </div>
  </div>
</template>

<script>
import $apis from "@/assets/js/api/login";
import share from "@/mixins/share";
import { copyText } from "@/assets/js/util";
export default {
  mixins: [share],
  data() {
    return {
      email: "",
      whatsapp: ""
    };
  },
  created() {
    this.getConfigs();
    this.getLang();
  },

  methods: {
    //获取配置数据
    getConfigs() {
      $apis.getConfigs(true).then(res => {
        if (res.code == 0) {
          localStorage.setItem("configs", JSON.stringify(res.data));
          res.data.forEach(item => {
            if (item.key == "email") {
              this.email = item.value;
            }
            if (item.key == "whatsapp") {
              this.whatsapp = item.value;
            }
          });
        }
      });
    },
    toWhatsapp() {
      window.open(`https://api.whatsapp.com/send?phone=${this.whatsapp}`);
    },
    toEmail () {
      window.location.href = `mailto:${this.email}`
    },
    copyEmail() {
      copyText(this.email);
    },
    finish() {
      this.$router.back();
    }
  },
  mounted() {},
  computed: {}
};
</script>
<style scoped lang="scss">
.container_page {
  margin: 0;
  background-color: var(--page-bg);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  color: #39404d;
}
.logo {
  width: 121px;
  height: 121px;
  margin: auto;
  margin-top: 60px;
  margin-bottom: 0;
}
.tip {
  font-size: 17px;
  font-weight: Bold;
  text-align: center;
  margin-bottom: 80px;
  padding: 0 28px;
  color: var(--text-color);
}
.action {
  margin: 0 28px;
  padding: 0 28px;
  background: #ffffff;
  border-radius: 13px;
  padding-bottom: 12px;
  .action_title {
    font-size: 17px;
    font-weight: 600;
    padding: 16px 0;
    border-bottom: 1px solid #d2d8e2;
  }
  .action_contact {
    display: flex;
    align-items: center;
    padding: 12px 0;
    img {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
    text-align: left;
  }
}
</style>
